<template>
  <div>
    <div class="contbox6_10">
      <!-- 机构列表 -->
      <p class="titlelist6_10">
        权益管理<span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span
        >权益详情<el-button
          style="float: right;margin-right: 30px;"
          type="primary"
          @click="shangyi()"
          v-if="!xi"
          >返回</el-button
        >
      </p>
      <div
        style="width: 100%;float: left;border-bottom: 1px solid #eee;margin-bottom: 30px;margin-top: 10px;"
      ></div>

      <!-- <div class="sousuojg6_10" style="background: none;border: 1px solid #eee;" v-for="val in tableData.mbrInfos">
            <h4 style="float: left;width: 100%;margin-top: -20px;margin-bottom: 20px;">{{val.level}}</h4>
               <el-form ref="form"  label-width="80px">
                  <el-form-item label="等级名称" style="float: left;">
                    <el-input v-model="val.name" style="width: 200px;margin-right: 40px;"></el-input>
                  </el-form-item>
                  <el-form-item label="开通金额" style="float: left;">
                    <el-input v-model="val.openAmt" style="width: 200px;margin-right: 40px;"></el-input>
                  </el-form-item>
                  <el-form-item label="奖励金额" style="float: left;">
                    <el-input v-model="val.buyMbrProf" style="width: 200px;"></el-input>
                    <span>元</span>
                  </el-form-item>
                  <el-form-item label="刷卡分润" style="float: left;">
                    <el-input v-model="val.cardProfRate" style="width: 200px;"></el-input>
                    <span>%</span>
                  </el-form-item>
                  <el-form-item label="扫码分润" style="float: left;margin-left: 26px;">
                    <el-input v-model="val.qrProfRate" style="width: 200px;"></el-input>
                    <span>%</span>
                  </el-form-item>
                  <el-form-item style="float: right;margin-right: 20px;    margin-top: 0;text-align: right;">
                    <el-button>详情</el-button>
                  </el-form-item>
                </el-form>
            </div> -->
      <div v-if="!xi" v-for="(val, index) in form" :key="index">
        <div
          class="sousuojg6_10"
          style="background: none;border: 1px solid #eee;"
        >
          <h4
            style="float: left;width: 100%;margin-top: -20px;margin-bottom: 20px;"
          >
            v{{ val.level }}
          </h4>
          <el-form label-width="80px">
            <el-form-item label="等级名称" style="float: left;">
              <el-input
                v-model="val.name"
                style=""
              ></el-input>
            </el-form-item>
            <el-form-item label="开通金额" style="float: left;">
              <el-input
                v-model="val.openAmt"
                
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="奖励金额" style="float: left;">
              <el-input
                v-model="val.buyMbrProf"
              ></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item label="刷卡分润" style="float: left;" v-if="val.mbrType==0">
              <el-input
                v-model="val.cardProfRate"
              ></el-input>
              <span>%</span>
            </el-form-item>
            <el-form-item
              label="扫码分润"
              v-if="val.mbrType==0"
              style="float: left;"
            >
              <el-input
                v-model="val.qrProfRate"
              ></el-input>
              <span>%</span>
            </el-form-item>
            <el-form-item label="利润分润" v-if="val.mbrType==1">
              <el-input v-model="val.leftProfRate">

              </el-input>
               <span>%</span>
            </el-form-item>
            <el-form-item
              style="float: right;margin-right: 20px;    margin-top: 0;text-align: right;"
            >
              <el-button
                @click="xinag(val.uid, val.level, index, val.channelUid)"
                >详情</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div class="huiyaun6_19" v-if="xi">
        <!--  <div class="huiyauntop6_19">
          <div v-for="(val,index) in msg" :class="val.cl?'huiyauntopli6_19 huiyauntoplitrue6_19':'huiyauntopli6_19 huiyauntoplifalse6_19'" @click="tupain(index)">{{val.name}}</div>
          <el-button style='float: right;margin-right: 30px;' type="primary" @click="gaun()">返回</el-button>
        </div>-->

        <div
          class="sousuojg6_10"
          style="background: none;border: 1px solid #eee;"
          v-if="msg[0].cl"
          v-for="val in form1"
        >
          <!-- <h4 style="float: left;width: 100%;margin-top: -20px;margin-bottom: 20px;">ii</h4> -->
          <el-form label-width="100px">
            <el-form-item label="交易金额" style="float: left;">
              <el-input v-model="val.beginAmt" class="name" style="width: 140px;"></el-input>
              <span>--</span>
              <el-input v-model="val.endAmt" class="name" style="width: 140px;"></el-input>
              <span>元</span>
            </el-form-item>
            <el-form-item
              label="机具开通数"
              style="float: left;margin-left: 10px;"
            >
              <el-input
                v-model="val.openDeviceCnt"
                style="width: 100px;margin-right: 40px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="新增商户数" style="float: left;">
              <el-input
                v-model="val.openMerCnt"
                style="width: 100px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="新增下级数" style="float: left;">
              <el-input
                v-model="val.openSonOfficeCnt"
                style="width: 100px;"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <el-button
          v-if="msg[0].cl"
          style="float: left;margin-left: 30px;margin-top: 80px;margin-bottom: 50px;"
          type="primary"
          @click="peizhi()"
          >下一步</el-button
        >
        <el-button
          v-if="msg[0].cl"
          style="float: left;margin-left: 30px;margin-top: 80px;margin-bottom: 50px;"
          @click="gaun()"
          >上一步</el-button
        >

        <div class="huiyuantupian6_19" v-if="msg[1].cl && !tuxiu">
          <h4
            style="float: left;width: 100%;margin-top: 20px;margin-bottom: 20px;font-size: 15px;"
          >
            预览图
          </h4>
          <el-image
            style="width: 300px; height: auto;"
            v-for="val in imgform.bgPhotos"
            v-if="val.status == 0"
            :src="val.filePath"
            :fit="contain"
          ></el-image>
          <el-button style="" @click="xiugain()">修改</el-button>
          <div style="clear: both;"></div>
          <h4
            style="float: left;width: 100%;margin-top: 20px;margin-bottom: 20px;font-size: 15px;"
          >
            详情图
          </h4>

          <el-image
            style="width: 400px; height: auto;"
            :src="imgform.dePhotoPath"
            :fit="contain"
          ></el-image>
          <el-button @click="xiugain()">修改</el-button>

          <!-- <el-button style='float: left;margin-left: 30px;margin-top: 80px;margin-bottom: 100px;' type="primary" @click="baocun()">保存</el-button> -->
        </div>

        <div class="huiyaun6_19" v-if="tuxiu" style="margin-top: 30px;">
          <ul class="uitupian6_19">
            <li v-for="(val, index) in imgform.bgPhotos" :key="index">
              <el-image
                style="width: 300px; height: auto;"
                :src="val.filePath"
                :fit="contain"
              ></el-image>
              <!-- <el-checkbox v-model="checked"  v-if="val.status==0" style="position: absolute;left: 140px;bottom: 20px;z-index: 9;"></el-checkbox> -->
              <img
                src=""
                alt=""
                v-if="val.status == 0"
                style="position: absolute;left: 140px;bottom: 20px;z-index: 9;"
              />
              <el-button
                v-if="val.status == 1"
                style="position: absolute;left: 110px;bottom: 20px;z-index: 9;"
                @click="quxiaoimg(index)"
                >使用</el-button
              >
            </li>
            <el-button
            style="float: left;margin-left: 30px;margin-top: 80px;margin-bottom: 50px;"
            type="primary"
            @click="tupainbox()"
            >完成</el-button
          >
          <el-button
            style="float: left;margin-left: 30px;margin-top: 80px;margin-bottom: 50px;"
            @click="quxiao()"
            >取消</el-button
          >
          </ul>

          <el-upload
            class="avatar-uploader"
            action="string"
            :on-change="UploadImage"
            :show-file-list="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div
              class="el-upload__text"
              style="font-size: 15px;color: #999;padding-bottom: 10px;"
            >
              点击上传banner图
            </div>
            <div class="el-upload__tip" slot="tip" style="margin-left: 35px;">
              要求：不得超过1M，尺寸要求：345：186
            </div>
          </el-upload>

          <el-upload
            class="avatar-uploader"
            action="string"
            :show-file-list="false"
            :on-change="UploadImage1"
          >
            <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div
              class="el-upload__text"
              style="font-size: 15px;color: #999;padding-bottom: 10px;"
            >
              点击上传权益详情图
            </div>
            <div class="el-upload__tip" slot="tip" style="margin-left: 35px;">
              要求：不得超过1M
            </div>
          </el-upload>

          <div
            style="width: 100%;float: left;border-bottom: 1px solid #eee;margin-bottom: 30px;margin-top: 10px;"
          ></div>

          <el-button
            style="float: left;margin-left: 30px;margin-top: 80px;margin-bottom: 50px;"
            type="primary"
            @click="tupainbox()"
            >完成</el-button
          >
          <el-button
            style="float: left;margin-left: 30px;margin-top: 80px;margin-bottom: 50px;"
            @click="quxiao()"
            >取消</el-button
          >
        </div>

        <div style="clear: both;"></div>
      </div>
    </div>
  </div>
</template>

<script scoped>
export default {
  name: "route",
  data() {
    return {
      checked: true,
      imageUrl: "",
      imageUrl1: "",
      tuxiu: false,
      contain: "",
      xi: false,
      msg: [
        {
          name: "升级规则",
          cl: true
        },
        {
          name: "配置图片",
          cl: false
        }
      ],
      type: 1,
      currentPage: 1, //默认显示第一页
      pageSize: 1, //默认每页显示10条
      totalNum: 0, //总页数
      imgform: {
        bgPhotos: [{ filePath: "", id: "", status: "" }],
        dePhotoId: "",
        dePhotoPath: ""
      },
      form: [
        {
          uid: "",
          level: "",
          name: "",
          openAmt: "",
          qrProfRate: "",
          cardProfRate: "",
          buyMbrProf: "",
          leftProfRate:""
        }
      ],
      form1: [
        {
          beginAmt: "",
          endAmt: "",
          openDeviceCnt: "",
          openMerCnt: "",
          openSonOfficeCnt: "",
        }
      ],
      form2: {
        merUid: "",
        channelUid: "",
        officeUid: "",
        level: "",
        bgPhotoId: "",
        bgPhotoPath: "",
        dePhotoId: "",
        dePhotoPath: ""
      },
      tableData: [],
      multipleSelection: [],
      urltype: this.GLOBAL.httpurl
    };
  },
  mounted: function() {
    window.scrollTo(0, 0);
    var _this = this;
    //  document.title = '详情';
    /*_this.form.memberUid=localStorage.getItem("huiyuanid");*/
    _this.shuju();
    /*  _this.shnegjian()*/
  },
  components: {},

  methods: {
    peizhi() {
      var _this = this;
      _this.imageUrl = "";
      _this.imageUrl1 = "";
      for (let i = 0; i < _this.form1.length; i++) {
        console.log(_this.form)
        if (_this.form1[i].beginAmt === "")
          return layer.open({
            content: "交易金额不能为空",
            skin: "msg",
            time: 2
          });
        if (_this.form1[i].endAmt === "")
          return layer.open({
            content: "交易金额不能为空",
            skin: "msg",
            time: 2
          });
        if (_this.form1[i].openDeviceCnt === "")
          return layer.open({
            content: "机具开通数不能为空",
            skin: "msg",
            time: 2
          });
        if (_this.form1[i].openMerCnt === "")
          return layer.open({
            content: "新增商户数不能为空",
            skin: "msg",
            time: 2
          });
        if (_this.form1[i].openSonOfficeCnt === "")
          return layer.open({
            content: "新增下级数不能为空",
            skin: "msg",
            time: 2
          });
      }
      console.log(_this.form)
      _this
        .axios({
          //axios请求
          method: "post",
          url: _this.urltype + "/api/member/saveUpdateRule",
          data: {
            channelUid: localStorage.getItem("level3"),
            officeUid: localStorage.getItem("officeUid"),
            level: localStorage.getItem("level1"),
            mbrAddInfos: _this.form1,
            leftProfRate:_this.form[localStorage.getItem("level2")].leftProfRate,
            mbrType:_this.form[0].mbrType,
            name: _this.form[localStorage.getItem("level2")].name,
            openAmt: _this.form[localStorage.getItem("level2")].openAmt,
            qrProfRate: _this.form[localStorage.getItem("level2")].qrProfRate,
            cardProfRate:
              _this.form[localStorage.getItem("level2")].cardProfRate,
            buyMbrProf: _this.form[localStorage.getItem("level2")].buyMbrProf
          }
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.msg[0].cl = false;
            _this.msg[1].cl = true;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    tupainbox() {
      var _this = this;
      let arr = [];
      console.log(12345, _this.imgform);
      if (_this.imageUrl != "") {
        for (var s = 0; s < _this.imgform.bgPhotos.length; s++) {
          _this.imgform.bgPhotos[s].status = 1;
        }
        arr = _this.imgform.bgPhotos;
        arr.push({
          filePath: _this.imageUrl,
          status: 0
        });
      } else {
        arr = _this.imgform.bgPhotos;
      }

      _this
        .axios({
          //axios请求
          method: "post",
          url: _this.urltype + "/api/member/saveMbrPhoto",
          data: {
            merUid: localStorage.getItem("level"),
            channelUid: localStorage.getItem("huiyuanid"),
            officeUid: localStorage.getItem("officeUid"),
            level: _this.vji,
            bgPhotos: arr,
            dePhotoId: _this.imgform.dePhotoId,
            dePhotoPath: _this.imageUrl1
          }
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
            _this.tupain1();
            _this.msg[0].cl = true;
            _this.msg[1].cl = false;
            _this.tuxiu = false;
            _this.xi = false;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    beforeAvatarUpload(file) {
      const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.raw.type);
      let that = this;
      const isSize = new Promise(function(resolve, reject) {
        // let width = 345;
        // let height = 186;
        let _URL = window.URL || window.webkitURL;
        let image = new Image();
        image.onload = function() {
          let valid = that.$commit.ImageRestrictions(
            image.width,
            image.height,
            3
          );
          valid ? resolve() : reject();
        };
        image.src = _URL.createObjectURL(file.raw);
      }).then(
        () => {
          return file;
        },
        () => {
          layer.open({
            content: "请按照提示尺寸上传图片！",
            skin: "msg",
            time: 2 //1秒后自动关闭
          });
          return false;
        }
      );
      if (!isJPG) {
        layer.open({
          content: "请按照提示的格式上传图片!",
          skin: "msg",
          time: 2 //1秒后自动关闭
        });
        return false;
      }
      

      return true;
      /*return isJPG && isLt2M && isSize;*/
    },
    beforeAvatarUpload1(file) {
      const isJPG = /^image\/(jpeg|png|jpg)$/.test(file.raw.type);


      if (!isJPG) {
        layer.open({
          content: "请按照提示的格式上传图片!",
          skin: "msg",
          time: 2 //1秒后自动关闭
        });
        return false;
      }
      

      return true;
      /*return isJPG && isLt2M && isSize;*/
    },
    UploadImage(param) {
      var _this = this;
      if (!_this.beforeAvatarUpload(param)) {
        return false;
      }
      const formData = new FormData();
      formData.append("file", param.raw);
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: _this.urltype + "/api/fileUpload",
          data: formData
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.imageUrl = d.data.data.filePath;
            for (var s = 0; s < _this.imgform.bgPhotos.length; s++) {
              _this.imgform.bgPhotos[s].status = 1;
            }
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    UploadImage1(param) {
      var _this = this;
      if (!_this.beforeAvatarUpload1(param)) {
        return false;
      }
      const formData = new FormData();
      formData.append("file", param.raw);
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: _this.urltype + "/api/fileUpload",
          data: formData
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.imageUrl1 = d.data.data.filePath;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    quxiaoimg(n) {
      var _this = this;
      for (var s = 0; s < _this.imgform.bgPhotos.length; s++) {
        if (s == n) {
          _this.imgform.bgPhotos[s].status = 0;
        } else {
          _this.imgform.bgPhotos[s].status = 1;
        }
      }
    },
    /*    tupain(){
        this.form2.bgPhotoPath =this.imageUrl;
        this.form2.dePhotoPath =this.imageUrl1;
        this.baocun();
      },*/
    quxiao() {
      this.tuxiu = false;
    },
    xiugain() {
      this.tuxiu = true;
      this.imageUrl1 = this.imgform.dePhotoPath;
    },

    tupain1() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: _this.urltype + "/api/member/queryMbrPhoto",
          data: {
            memberUid: localStorage.getItem("level")
          }
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.imgform = d.data.data;
            _this.imageUrl1 = _this.imgform.dePhotoPath;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    shnegjian() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: _this.urltype + "/api/member/queryUpdateRule",
          data: {
            merUid: localStorage.getItem("level")
          }
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.form1 = d.data.data;
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    xinag(n, s, i, j) {
      localStorage.setItem("level", n);
      localStorage.setItem("level1", s);
      localStorage.setItem("level2", i);
      localStorage.setItem("level3", j);

      this.xi = true;
      this.shnegjian();
      this.tupain1();
    },
    gaun() {
      this.xi = false;
    },
    tupain(n) {
      if (n == 0) {
        this.msg[0].cl = true;
        this.msg[1].cl = false;
      } else {
        this.msg[0].cl = false;
        this.msg[1].cl = true;
        this.tupain1();
      }
    },
    shangyi() {
      var _this = this;
      _this.$emit("type", 1);
      this.$router.go(-1)
    },
    onnew() {
      this.type = 3;
    },
    onSubmit() {
      this.shuju();
    },
    shuju() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: _this.urltype + "/api/member/queryUpdateCfg",
          data: {
            channelUid: localStorage.getItem("huiyuanid"),
            officeUid: localStorage.getItem("officeUid")
          }
        })
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.form = d.data.data;
            console.log("下面是form")
            console.log(_this.form)
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.form.number = val; //动态改变
      this.shuju();
    },
    handleCurrentChange(val) {
      /* alert(`当前页: ${val}`);*/

      this.form.page = val; //动态改变
      this.shuju();
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    showdou() {
      this.$refs.mychild.parentHandleclick();
    }
  }
};
</script>

<style scoped>
/* 单独样式 */
.contbox6_10 {
  width: 96%;
  margin-left: 2%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}
.sousuojg6_10 {
  float: left;
  font-size: 16px;
  color: #222;
  box-sizing: border-box;
  background-color: #f6f6f6;
  margin-top: 20px;
  border-radius: 5px;
}

.huiyaun6_19 {
  width: 100%;
  float: left;
}
.huiyauntop6_19 {
  width: 100%;
  float: left;
  font-size: 14px;
  margin-top: 30px;
  border-bottom: 1px solid #eee;
}
.huiyauntopli6_19 {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  float: left;
  border: 1px solid #eee;
  border-radius: 5px;
}
.huiyauntoplitrue6_19 {
  background-color: #409eff;
  color: #fff;
}
.huiyauntoplifalse6_19 {
  background-color: #fff;
  color: #222;
}

.huiyaun6_19 {
  width: 100%;
  float: left;
}
.huiyauntop6_19 {
  width: 100%;
  float: left;
  font-size: 14px;
  margin-top: 30px;
  border-bottom: 1px solid #eee;
}
.huiyauntopli6_19 {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  float: left;
  border: 1px solid #eee;
  border-radius: 5px;
}
.huiyauntoplitrue6_19 {
  background-color: #409eff;
  color: #fff;
}
.huiyauntoplifalse6_19 {
  background-color: #fff;
  color: #222;
}
.uitupian6_19 {
  width: 100%;
  float: left;
}
.uitupian6_19 li {
  width: 300px;
  float: left;
  position: relative;
  margin-left: 40px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 35px;
  margin-top: 30px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.name > .el-input__inner{
  width:100%
}
</style>
